<template>
	<div class="merak-container-has-aside" id="zy_20240320001">
		<el-drawer @opened="opendForm" ref="detailDrawer" detailDrawer :close-on-click-modal="false"
			modal-class="merak_modal" v-model="menuDrawer" direction="rtl" :size="formTypeValue == 'second'?'30%':'50%'">
			<template #header>
				<div class="merak_modal_title">
					{{isEditForm?$t('merak.edit'):$t('merak.add')}}{{formTypeValue == 'second'?$t('menu_list.two_menu'):$t('menu_list.three_menu')}}
				</div>
			</template>
			<div>
				<el-form ref="ruleFormRefScend" :model="secondForm" :rules="scendRules" label-position="top"
					v-if="formTypeValue == 'second'">
					<el-form-item :label="$t('menu_list.title_zh')" prop="title">
						<el-input class="qf_input" v-model="secondForm.title" />
					</el-form-item>
					<el-form-item :label="$t('menu_list.title_ru')" prop="title_ru">
						<el-input class="qf_input" v-model="secondForm.title_ru" />
					</el-form-item>
					<el-form-item :label="$t('menu_list.path_name')" prop="name">
						<el-input class="qf_input" v-model="secondForm.name" />
					</el-form-item>
					<el-form-item :label="$t('menu_list.show_order')">
						<el-input class="qf_input" v-model="secondForm.listsort" />
					</el-form-item>
					<el-form-item :label="$t('menu_list.is_hide')">
						<el-radio-group v-model="secondForm.is_hide">
							<el-radio label="1">{{$t('merak.yes')}}</el-radio>
							<el-radio label="0">{{$t('merak.no')}}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div class="custom_label">
								<div>{{$t('menu_list.grouping')}}</div>
								<div>
									<el-button class="custom_btn" type="primary" :icon="Plus" size="small" circle
										@click="showInput('add')" />
									<el-button v-if="dragList.idx != null" type="primary" :icon="Edit" size="small" circle @click="showInput('edit')" plain />
									<el-button v-if="dragList.idx != null" type="danger" :icon="Delete" size="small" circle @click="handleClose()" plain />
								</div>
							</div>
						</template>
						<div class="flex gap-2">
							<draggable v-model="dragList.list" @change="dragChange">
								<template #item="{ element }">
									<el-check-tag class="custom_tag" :checked="element?.checked" :key="element.id" :disable-transitions="false"
										 @change="item=>chageOption(item,element)">
										{{ element.title }}
									</el-check-tag>
								</template>
							</draggable>
						</div>
					</el-form-item>
				</el-form>

				<el-form ref="ruleFormRefScend" :rules="threeRules" :model="threeForm" label-position="top" v-else>
					<el-row>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.one_menu')" v-if="isEditForm">
								<el-select class="qf_select" style="width: 100%;" v-model="threeForm.one_id"
									@change="editOneMenu">
									<el-option v-for="cItem in pageData.stairSelect" :key="cItem.title" :label="cItem.title"
										:value="cItem.id" />
								</el-select>
							</el-form-item>
						</el-col>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.two_menu')" v-if="isEditForm">
								<el-select class="qf_select" style="width: 100%;" v-model="threeForm.parent_id">
									<el-option v-for="cItem in pageData.secondSelect" :key="cItem.title" :label="cItem.title"
										:value="cItem.id" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.title_zh')" prop="title">
								<el-input class="qf_input" v-model="threeForm.title" />
							</el-form-item>
						</el-col>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.title_ru')" prop="title_ru">
								<el-input class="qf_input" v-model="threeForm.title_ru" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.path_name')" prop="name">
								<el-input class="qf_input" v-model="threeForm.name" />
							</el-form-item>
						</el-col>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.leading_end_url')" prop="path">
								<el-input class="qf_input" v-model="threeForm.path" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.leading_end_path')" prop="component">
								<el-input class="qf_input" v-model="threeForm.component" />
							</el-form-item>
						</el-col>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.after_end_url')">
								<el-input class="qf_input" v-model="threeForm.url" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.show_order')">
								<el-input class="qf_input" v-model="threeForm.listsort" />
							</el-form-item>
						</el-col>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.sub_title')">
								<el-input class="qf_input" v-model="threeForm.sub_title" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.sub_title_ru')">
								<el-input class="qf_input" v-model="threeForm.sub_title_ru" />
							</el-form-item>
						</el-col>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.is_hide')">
								<el-radio-group v-model="threeForm.is_hide">
									<el-radio label="1">{{$t('merak.yes')}}</el-radio>
									<el-radio label="0">{{$t('merak.no')}}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.open_type')">
								<el-radio-group v-model="threeForm.target">
									<el-radio label="1">{{$t('menu_list.new_page')}}</el-radio>
									<el-radio label="0">{{$t('menu_list.old_page')}}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					    <el-col :span="12">
							<el-form-item :label="$t('menu_list.grouping')">
								<el-select filterable clear
									class="qf_select" popper-class="own_popper"
									:placeholder="$t('merak.placeholder_select')"
									v-model="threeForm.tag_id">
									<el-option :label="oItem?.label" :value="oItem?.value"
										v-for="oItem in dragList.option"
										:key="oItem?.value" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					
					
					<!-- <el-form-item label="外链地址">
						<el-input class="qf_input" v-model="threeForm.is_link" />
					</el-form-item> -->
					
					
					
					
					
					
				</el-form>
			</div>
			<template #footer>
				<el-button type="primary" plain @click="submitFormGoOn(ruleFormRefScend)"
					v-if="isEditForm == false">保存并继续录入</el-button>
				<el-button type="primary" @click="submitForm((ruleFormRefScend))">保存</el-button>
				<el-button type="default" @click="menuDrawer=false">取消</el-button>
			</template>
		</el-drawer>
		<div class="merak-aside">
			<TreeFilter class label="title" :title="$t('menu_list.one_menu')" :data="pageData.stairList"
				:default-value="JSON.parse(JSON.stringify(stairValue.departmentId))" @change="changeMenuStair">
			</TreeFilter>
		</div>
		<div class="merak-aside">
			<TreeFilter :title="$t('menu_list.two_menu')" :data="pageData.secondList" isEdit isButton label="title"
				:default-value="JSON.parse(JSON.stringify(secondValue.departmentId))" @change="changeMenuSecond">
				<template #headButton>
					<div class="function_btn">
						<el-button type="primary" :icon="Plus" size="small" circle @click="addForm('second')" />
						<el-button type="primary" :icon="Edit" size="small" circle @click="editForm('second')" plain />
						<el-button type="danger" :icon="Delete" size="small" circle @click="deleteSecondMenu()" plain />
					</div>
				</template>
			</TreeFilter>
		</div>
		<div v-waterMarker class="merak-card merak-container-has-search">
			<serachBar custom_class="myclass" close-enter close-plan close-advanced>
				<template #footer>
					<el-button class="button_list" type="primary"
						@click="addForm('three')">{{$t('menu_list.add_menu_btn')}}</el-button>
				</template>
			</serachBar>
			<div class="merak-table-wrapper">
				<MerakXTable :columns-by-store="JSON.parse(JSON.stringify(menuState.columns))"
					:columns="menuState.columns" :data="menuState.data" :pagination="false"
					:on-page-change="handlePageChange" :show-header="false">
					<template #funBtn="{row}">
						<div class="action_btn">
							<el-button class="qf_btn_auto" type="primary" link @click="editFormThree('three',row)">
								{{$t('merak.edit')}}
							</el-button>
							<el-button class="qf_btn_auto" type="danger" link
								@click="deleteThreeMenu(row.id)">{{$t('merak.delete')}}
							</el-button>
						</div>
					</template>
				</MerakXTable>
			</div>

		</div>
		<el-dialog v-model="dragList.inputVisible" :title="dragList.headline" width="500">
			<el-form ref="groupingFormRef" :rules="groupingRules" label-position="top" :model="groupingForm">
				<el-form-item :label="$t('translation_manage.value_cn')" prop="title">
					<el-input v-model="groupingForm.title" class="qf_input" />
				</el-form-item>
				<el-form-item :label="$t('translation_manage.value_ru')" prop="title_ru">
					<el-input v-model="groupingForm.title_ru" class="qf_input" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dragList.inputVisible = false">{{ $t("merak.cancel") }}</el-button>
					<el-button type="primary" :loading="loading"
						@click="handleInputConfirm(groupingFormRef)">{{ $t("merak.confirm") }}</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="addMenu">
	import { nextTick, onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
	import { ElMessage, FormInstance, FormRules, ElInput } from "element-plus";
	import draggable from "vuedraggable";
	import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "@/components/MerakXTable";
	import TreeFilter from "@/components/TreeFilter/index.vue";
	import { Plus, Edit, Delete, EditPen } from '@element-plus/icons-vue'
	import { getAllMenuListApi, addMenuListApi, deleteMenuListApi,getGroupingList } from "@/api/modules/menu";
	import { moreConfirm, confirmWarningMsg, successMsg, warnMsg, confirmSuccessMsg } from "@/utils/messageUtils";
	import serachBar from "@/components/SearchBar/index";
	import { useGlobalStore } from "@/stores/modules/global";
	const globalStore = useGlobalStore();
	const { proxy } = getCurrentInstance();
	const menuDrawer = ref(false);//弹窗控制
	const formTypeValue = ref('');//表单类型（二级/三级）
	const isCloseForm = ref(false);//表单类型（二级/三级）
	const isEditForm = ref(false);//用来判断（保存并继续按钮）是否存在，编辑的时候消失，新增的时候存在
	const detailDrawer = ref(null)
	const drawer = ref(null)
	const ruleFormRefScend = ref<FormInstance>()
	const groupingFormRef = ref<FormInstance>()
	const loading = ref(false);
	const language = computed(() => globalStore.language);//页面翻译语种
	const dragList = ref({
		list: [],//二级分组列表
		option:[],//三级分组option
		headline:'',
		title_ru: '',//标题俄语
		title: '',//标题中文
		inputVisible: false,//分组新建编辑弹窗
		idx:null,//二级菜单分组选择下标
		isEdit:false,
	})
	const handleClose = (tag : string) => {
		dragList.value.list.splice(dragList.value.idx, 1)
	}
	const chageOption = (type,row) =>{
		let oIdx = dragList.value.list.indexOf(row);
		if(type){
			dragList.value.idx = oIdx;
		} else {
			dragList.value.idx = null;
		}
		dragList.value.list.map((item,idx)=>{
			if(type){
				if(idx == oIdx){
					item.checked = true
				} else {
					item.checked = false
				}
			} else {
				item.checked = false
			}
			
		})
	}
	const showInput = (type) => {
		if(type == 'add'){
			dragList.value.headline = proxy!.$t("marking_application_form.edit")+proxy!.$t("menu_list.grouping")
			groupingForm.title = '';
			groupingForm.title_ru = '';
			dragList.value.isEdit = false;
		} else {
			dragList.value.headline = proxy!.$t("merak.edit")+proxy!.$t("menu_list.grouping")
			groupingForm.title = dragList.value.list[dragList.value.idx].title;
			groupingForm.title_ru = dragList.value.list[dragList.value.idx].title_ru;
			dragList.value.isEdit = true;
		}
		
		dragList.value.inputVisible = true
	}
	
	//保持分组
	const handleInputConfirm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return;
		await formEl.validate((valid, fields) => {
			if (valid) {
				loading.value = true;
				let item = {
					title: groupingForm.title,
					title_ru: groupingForm.title_ru,
					checked:false,
				}
				if(dragList.value.isEdit){
					dragList.value.list[dragList.value.idx].title = groupingForm.title;
					dragList.value.list[dragList.value.idx].title_ru = groupingForm.title_ru;
				} else {
					dragList.value.list.push(item)
				}
				dragList.value.inputVisible = false
				loading.value = false;
			} else {
				console.log("error submit!", fields);
			}
		});

	}
	const pageData = reactive({
		menuList: [],//全部菜单
		stairList: [],//一级菜单
		stairSelect: [],//一级目录
		secondList: [],//二级菜单
		secondSelect: [],//二级目录
		threeList: [],//三级菜单
	});
	onMounted(async () => {
		await initMenuList()
	});
	const menuState = reactive<{
		columns : MerakXTableColumn[];
		data : any[];
	}>({
		columns: [
			{ field: "id", title: "id", },
			{ field: "name", title: proxy!.$t("menu_list.path_name"), },
			{ field: "title", title: proxy!.$t("menu_list.title_zh") },
			{ field: "title_ru", title: proxy!.$t("menu_list.title_ru") },
			{ field: "path", title: proxy!.$t("menu_list.leading_end_url") },
			{ field: "component", title: proxy!.$t("menu_list.leading_end_path") },
			{ field: "tag", title: proxy!.$t("menu_list.grouping") },
			{ field: "url", title: proxy!.$t("menu_list.after_end_url") },
			{ field: "listsort", title: proxy!.$t("menu_list.show_order") },
			// { field: "is_link", title: "外链地址" },
			{ field: "is_hide", title: proxy!.$t("menu_list.is_hide") },
			{ field: "target", title: proxy!.$t("menu_list.open_type") },
			{ field: "subtitle_cn", title: proxy!.$t("menu_list.sub_title") },
			{ field: "subtitle_ru", title: proxy!.$t("menu_list.sub_title_ru") },
			{ field: "fun_box", title: proxy!.$t("merak.action"), fixed: "right", slots: { default: "funBtn" }, width: globalStore.language == "zh"?120:200 },
		],
		data: [

		]
	});

	const secondForm = ref({//二级菜单数据
		parent_id: "",
		title: "",
		title_ru: "",
		name: "",
		listsort: "0",
		is_hide: "0",
	})
	const threeForm = ref({//三级菜单数据
		one_id: "",
		parent_id: "",
		title: "",
		title_ru: "",
		name: "",
		path: "",
		component: "",
		url: "",
		listsort: "0",
		is_hide: "0",
		is_link: "",
		target: "0",
		icon: "Menu",
		sub_title: "",
		sub_title_ru: "",
		tag_id:'',
	})
	const groupingForm = reactive({//三级菜单数据
		one_id: "",
		parent_id: "",
	})
	//筛选一级菜单下的二级菜单目录 
	const editOneMenu = (menuId) => {
		const onMenuId = menuId;
		let thisData = pageData.menuList.find(msnuItem => msnuItem.id == onMenuId);
		let newListTwo = [];
		if (thisData != -1) {
			if (thisData.children) {
				thisData.children.map((secondItem : any, secondIndex : number) => {
					newListTwo.push({
						id: secondItem.id,
						name: secondItem.name,
						parent_id: secondItem.parent_id,
						title: secondItem.meta.title,
						title_ru: secondItem.meta.title_ru,
						is_hide: secondItem.meta.is_hide ? "1" : "0",
						listsort: secondItem.meta.listsort
					})
				})
			}
		}
		pageData.secondSelect = newListTwo;
		threeForm.value.parent_id = Number(newListTwo[0].id)
	}
	const stairValue = reactive({ departmentId: "", idx: "" });
	const changeMenuStair = (stairData : object) => {
		secondValue.departmentId = '';
		stairValue.departmentId = stairData.id;
		stairValue.idx = stairData.index;
		let sIdx = stairData.index;
		let thisData = pageData.menuList[sIdx];
		let newListTwo = [];
		if (thisData.children) {
			thisData.children.map((secondItem : any, secondIndex : number) => {
				newListTwo.push({
					id: secondItem.id,
					name: secondItem.name,
					parent_id: secondItem.parent_id,
					title: secondItem.meta.title,
					title_ru: secondItem.meta.title_ru,
					index: secondIndex,
					parent_index: sIdx,
					is_hide: secondItem.meta.is_hide ? "1" : "0",
					listsort: secondItem.meta.listsort
				})
			})
		}
		pageData.secondList = newListTwo;
		pageData.secondSelect = newListTwo;
		//pageData.threeList = []
		menuState.data = [];
	};
	// const handleClose = () => {
	// 	menuDrawer.value = false;
	// };
	const secondValue = reactive({ departmentId: "", idx: "", parent_index: "" });
	const changeMenuSecond = (secondData : string[]) => {
		secondValue.departmentId = JSON.stringify(secondData.id);
		secondValue.parent_index = JSON.stringify(secondData.parent_index);
		secondValue.idx = JSON.stringify(secondData.index);
		secondForm.value = secondData;
		let pIdx = secondData.parent_index;
		let sIdx = secondData.index;
		if (pageData.menuList[pIdx].children) {
			let thisData = pageData.menuList[pIdx].children[sIdx];
			let newListThree = [];
			if (thisData.children) {
				thisData.children.map((threeItem : any, threeIndex : number) => {
					console.log(threeItem)
					let newItem = {
						id: threeItem.id,
						name: threeItem.name,
						title: threeItem.meta.title,
						title_ru: threeItem.meta.title_ru,
						path: threeItem.path,
						component: threeItem.component,
						url: threeItem.url,
						listsort: threeItem.meta.listsort,
						//is_link: threeItem.meta.is_link,
						is_hide: threeItem.meta.is_hide ? "1" : "0",
						target: threeItem.meta.target ? "1" : "0",
						sub_title: threeItem.meta.sub_title,
						sub_title_ru: threeItem.meta.sub_title_ru,
					}
					if(threeItem.meta.tag_id && threeItem.meta.tag_id != 0){
						
						if(language == "zh"){
							newItem.tag = threeItem.meta.tag_title;
						} else {
							newItem.tag = threeItem.meta.tag_title_ru;
						}
						newItem.tag_id = threeItem.meta.tag_id;
					}
					newListThree.push(newItem)
				})
			} else {
				newListThree = []
			}
			// console.log(newListThree)
			// console.log(menuState.data)
			menuState.data = newListThree;
		}
	};

	//新增菜单
	const addForm = (formType : any) => {
	
		if (formType == "second") {
			if (stairValue.departmentId == '') return ElMessage.error(proxy!.$t("menu_list.error_one_menu"));
			dragList.value.list = [];
		} else {
			if (secondValue.departmentId == '') return ElMessage.error(proxy!.$t("menu_list.error_two_menu"));
			getOptionList(Number(secondValue.departmentId))
		}
		formTypeValue.value = formType;
		resetForm(ruleFormRefScend.value)

		secondForm.value = {//二级菜单数据
			parent_id: "",
			title: "",
			title_ru: "",
			name: "",
			listsort: "0",
			is_hide: "0",
		}
		threeForm.value = {//三级菜单数据
			parent_id: "",
			title: "",
			title_ru: "",
			name: "",
			path: "",
			component: "",
			url: "",
			listsort: "0",
			is_hide: "0",
			is_link: "",
			target: "0",
			sub_title: '',
			sub_title_ru: '',
		}
		isEditForm.value = false;
		menuDrawer.value = true;
	}
	//获取二级菜单下的分组
	const getOptionList = (id)=>{
		let oData = {
			menu_id:id
		}
		getGroupingList(oData).then(({data,code,message}) => {
			if (code == 2000) {
				dragList.value.option = data.list;
			}
		})
	}
	//编辑菜单
	const editForm = (formType : any) => {
		if (secondValue.departmentId == '') return ElMessage.error(proxy.$t('menu_list.edit_two_menu'));
		formTypeValue.value = formType;
		isEditForm.value = true;
		menuDrawer.value = true;
		let sIdx = stairValue.idx;
		let tIdx = secondValue.idx;
		let secondItem = pageData.menuList[sIdx].children[tIdx];
		secondItem = JSON.parse(JSON.stringify(secondItem))
		console.log(secondItem)
		secondForm.value = {
			id: secondItem.id,
			name: secondItem.name,
			parent_id: secondItem.parent_id,
			title: secondItem.meta.title,
			title_ru: secondItem.meta.title_ru,
			index: tIdx,
			parent_index: sIdx,
			is_hide: secondItem.meta.is_hide ? "1" : "0",
			listsort: secondItem.meta.listsort
		}
		if(secondItem.meta.tag_list){
			dragList.value.list = secondItem.meta.tag_list;
		}
		
	}
	const editFormThree = (formType : any, threeItemData : any) => {
		formTypeValue.value = formType;
		threeItemData = JSON.parse(JSON.stringify(threeItemData))
		threeForm.value = threeItemData;
		threeForm.value.parent_id = Number(secondValue.departmentId)
		threeForm.value.one_id = Number(stairValue.departmentId);
		isEditForm.value = true;
		menuDrawer.value = true;
		getOptionList(Number(secondValue.departmentId))
	}
	const submitForm = async (formEl : FormInstance | undefined) => {
		isCloseForm.value = true;
		if (!formEl) return;
		await formEl.validate((valid, fields) => {
			if (valid) {
				formTypeValue.value == 'second' ? scbmitFormFunction(secondForm.value) : scbmitFormFunction(threeForm.value)
			} else {
				console.log("error submit!", fields);
			}
		});
	};
	const submitFormGoOn = async (formEl : FormInstance | undefined) => {
		isCloseForm.value = false;
		if (!formEl) return;
		await formEl.validate((valid, fields) => {
			if (valid) {
				formTypeValue.value == 'second' ? scbmitFormFunction(secondForm.value) : scbmitFormFunction(threeForm.value)
			} else {
				console.log("error submit!", fields);
			}
		});
	};
	const scbmitFormFunction = (formData : any) => {

		if (formTypeValue.value == 'second') {
			formData.parent_id = stairValue.departmentId;
			if(dragList.value.list.length >0){
				formData.tag = dragList.value.list;
			}
			
		} else {
			if (isEditForm.value) {

			} else {
				formData.parent_id = secondValue.departmentId
			}
			formData.icon = 'Menu'
		}
		addMenuListApi(formData).then(formRes => {
			if (formRes.code == 2000) {
				opendForm()
				initMenuList(formTypeValue.value);
				resetForm(ruleFormRefScend.value)
				dragList.value.list = [];
				threeForm.value.url = "";
				threeForm.value.listsort = "0";
				if (isCloseForm.value) {
					menuDrawer.value = false;
				}
			}
		})
	}
	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
	//删除二级菜单目录
	const deleteSecondMenu = () => {
		if (secondValue.departmentId == '') return ElMessage.error(proxy.$t('menu_list.detele_two_menu'));
		confirmWarningMsg({
			msg: proxy.$t('menu_list.delete_hint'),
			callback: val => {
				if (val == "confirm") {
					deleteMenuListApi(secondValue.departmentId).then(formRes => {
						if (formRes.code == 2000) {
							initMenuList("second")
							secondValue.departmentId = ''
							ElMessage.success(proxy.$t('menu_list.detele_success'))

						}
					})
				}
			}
		});

	}
	const deleteThreeMenu = (deteleThreeId : any) => {
		confirmWarningMsg({
			msg: proxy.$t('menu_list.detele_error_three_menu'),
			callback: val => {
				if (val == "confirm") {
					deleteMenuListApi(deteleThreeId).then(formRes => {
						if (formRes.code == 2000) {
							initMenuList("three")
							ElMessage.success(proxy.$t('menu_list.detele_success'))

						}
					})
				}
			}
		});
	}

	//初始化以及实时更新接口数据
	const initMenuList = async (updateFormType : any) => {
		const { data } = await getAllMenuListApi();
		pageData.menuList = data.list;
		let newList : any = [];
		data.list.map((stairItem : any, stairIndex : number) => {
			newList.push({
				id: stairItem.id,
				parent_id: stairItem.parent_id,
				title: stairItem.meta.title,
				title_ru: stairItem.meta.title_ru,
				index: stairIndex,
			})
		})
		pageData.stairList = newList;
		pageData.stairSelect = newList;
		if (updateFormType) {
			updateMenuList(updateFormType)
		}
	}

	const updateMenuList = (updateFormType : any) => {
		let sIdx = stairValue.idx;
		if (updateFormType == "second") {
			let tId = secondValue.departmentId;
			let thisData = pageData.menuList[sIdx];
			let newListTwo = [];
			if (thisData.children) {
				thisData.children.map((secondItem : any, secondIndex : number) => {
					newListTwo.push({
						id: secondItem.id,
						name: secondItem.name,
						parent_id: secondItem.parent_id,
						title: secondItem.meta.title,
						title_ru: secondItem.meta.title_ru,
						index: secondIndex,
						parent_index: sIdx,
						is_hide: secondItem.meta.is_hide ? "1" : "0",
						listsort: secondItem.meta.listsort
					})
				})
			}
			pageData.secondList = newListTwo;
			pageData.secondSelect = newListTwo;
			//menuState.data = [];
			secondValue.departmentId = tId
		} else {
			let tId = secondValue.departmentId;
			let tIdx = secondValue.idx;
			let thisDataTwo = pageData.menuList[sIdx];
			let thisDataThree = pageData.menuList[sIdx].children[tIdx];
			let newListTwo = [];
			let newListThree = [];
			if (thisDataTwo.children) {
				thisDataTwo.children.map((secondItem : any, secondIndex : number) => {
					newListTwo.push({
						id: secondItem.id,
						name: secondItem.name,
						parent_id: secondItem.parent_id,
						title: secondItem.meta.title,
						title_ru: secondItem.meta.title_ru,
						index: secondIndex,
						parent_index: sIdx,
						is_hide: secondItem.meta.is_hide ? "1" : "0",
						listsort: secondItem.meta.listsort
					})
				})
			}
			if (thisDataThree.children) {
				thisDataThree.children.map((threeItem : any, threeIndex : number) => {
					newListThree.push({
						id: threeItem.id,
						name: threeItem.name,
						title: threeItem.meta.title,
						title_ru: threeItem.meta.title_ru,
						path: threeItem.path,
						component: threeItem.component,
						url: threeItem.url,
						listsort: threeItem.meta.listsort,
						is_link: threeItem.meta.is_link ? "1" : "0",
						is_hide: threeItem.meta.is_hide ? "1" : "0",
						target: threeItem.meta.target ? "1" : "0",
						sub_title: threeItem.meta.sub_title,
						sub_title_ru: threeItem.meta.sub_title_ru,
					})
				})
			} else {
				newListThree = []
			}
			// console.log(newListThree)
			// console.log(menuState.data)
			pageData.secondList = newListTwo;
			pageData.secondSelect = newListTwo;
			secondValue.departmentId = tId
			menuState.data = newListThree;
		}

	}

	const opendForm = () => {
		const formElement = document.querySelector(".el-drawer__body");
		formElement.scrollTop = 0
	}
	const scendRules = reactive({
		title: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
		title_ru: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
		name: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
	});
	const groupingRules = reactive({
		title: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
		title_ru: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
	});

	const threeRules = reactive({
		title: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
		title_ru: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
		name: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
		path: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
		component: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
	});

	const handlePageChange : MerakXTableInstance["onPage-change"] = ({ currentPage, pageSize }) => {
		console.log(currentPage, pageSize);
	};
</script>

<style scoped lang="scss">
	@import "./index.scss";
</style>